<template>
  <a-row>
    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <v-charts :options="options"  style="width:100%;height:400px" autoresize />
    </a-col>
  </a-row>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import 'echarts/lib/component/markLine'
import { getAction } from '@api/manage'

export default {
  name: 'TeachingBar',
  components:{
    'v-charts': ECharts
  },
  props: {
    date: {
      type: String,
      default: () => []
    }
  },
  watch:{
    date :function() {
      this.loadDate();
    }
  },
  mounted() {
    this.loadDate();
  },
  methods:{
    loadDate(){
      getAction(this.url.defaultTeaching, { date: this.date}).then((res) => {
        if (res.success) {
          console.log("TeachingBar", res.result);
          console.log(this.options.legend)
          this.options.legend.data = res.result.items
          this.options.xAxis[0].data = res.result.depNames
          this.options.series = res.result.series
        }
        // console.log(this.options)
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    }
  },
  data(){
    return {
      loading: false,
      url: {
        defaultTeaching: 'index/schoolIndex/teachingDefaultByYear'
      },
      options : {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data:[]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '25%',
          show: true,
        },
        xAxis: [

          {
            axisLabel:{
              interval: 0,
              rotate: 45
            },
            type: 'category'
          }
        ],
        yAxis: [
          {
            type: 'value',
            min:0
          }
        ],
        series: [

        ]
      }
    }
  }
}
</script>

<style scoped>

</style>